import React from 'react'
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import SideMenu from '../../components/layout/SideMenu'
import TopHeader from '../../components/layout/TopHeader'
import PageRouter from '../../router/PageRouter'
import {useSelector,useDispatch} from 'react-redux';



const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    marginLeft: -drawerWidth,
  },
  contentShift: {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 0,
  },
}));

export default function SandBox() {
  const classes = useStyles();

  const showMenu = useSelector(state => state.CollapsedReducer);

  return (
    <div className={classes.root}>
      <CssBaseline />
      <TopHeader></TopHeader>
      <SideMenu></SideMenu>
      <main
        className={clsx(classes.content, {
          [classes.contentShift]: showMenu,
        })}
      >
        <div className={classes.drawerHeader} />
        <PageRouter></PageRouter>
      </main>
    </div>
  );


}
